<template>
  <div class="tabs-main">
    <a-tabs v-model="tabValue" :tabBarStyle="{ backgroundColor: '#fff',marginBottom: '6px',padding: '0px 8px' }" v-if="tabsItems && tabsItems.length>0" @change="changeTabs">
      <a-tab-pane v-for="item in tabsItems" :tab="item.title" :key="item.key" />
    </a-tabs>
    <a-row type="flex" style="flex-flow: inherit;" v-if="reloading">
      <a-col :flex="toggle?'260px':'30px'" style="margin-right: 12px;background-color: #fff;">
        <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      </a-col>
      <a-col flex="auto">
        <roll-in v-if="tabValue===1" />
        <roll-out v-if="tabValue===2" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import departTree from '../../modules/departTree';
import rollIn from './components/drugRollIn';
import rollOut from './components/drugRollOut';

export default {
  components: { departTree, rollIn, rollOut },
  data() {
    return {
      tabsItems: [
        { key: 1, title: '外省转入', },
        { key: 2, title: '转出省外', },
      ],
      tabValue: 1,
      reloading: true,
      toggle: true,
    }
  },
  created() {},
  async mounted() {},
  methods: {
    changeTabs() {
      this.reload()
      // this.onResetForm()
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    },
    getTreeData(datas, id) {
      console.log(datas, id)
      console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    },
    getComponents(key) {
      let item = this.components.find(obj=> {return obj.type == this.tabValue})
      return item[key]
    },
  }
}
</script>
<style lang="less" scoped>
</style>
